<template>
	<view class="fault">
		<view class="fault_tem" v-if="faultDetail?.content">
			<text class="title_top">故障内容</text>
			<view class="content">
				<p class="text">{{faultDetail?.content}}</p>
				<view v-for="(item,index) in faultDetail?.path" @click="lookImg(faultDetail?.path)" :key="index" class="img-pic">
					<image :src="item" mode="aspectFill" class="img_path"></image>
				</view>
			</view>
		</view>

		<view class="fault_tem" v-if="faultDetail?.solution">
			<text class="title_top">解决方法</text>
			<view class="content">
				<p class="text">{{faultDetail?.solution}}</p>
				<view v-for="(item,index) in faultDetail?.solutionPath" @click="lookImg(faultDetail?.solutionPath)" :key="index" class="img-pic">
					<image :src="item" mode="aspectFill" class="img_path"></image>
				</view>
			</view>
		</view>
	</view>


</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import store from '@/store_network/index.js'
	import apiFault from '@/util/network_api/fault.js'
	const faultDetail = ref(null) //详情
	onLoad((e) => {
		getfaultTypeDetail(e.id)
	})
	const getfaultTypeDetail = async (id) => {
		await apiFault.getUserMobileFaultDetail(id).then(res => {
			if (res.code == 20000) {
				faultDetail.value = res.data.row

			}
		})
	}
	const activeNames = ref([]);
	// 预览图片
	const lookImg = (urls) => {
		uni.previewImage({
			urls: urls,
		})
	}
</script>

<style lang="scss" scoped>
	.fault {
		background-color: #f6f7fa;
		height: 100vh;

		.fault_tem {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 30rpx;

			.title_top {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.content {
				background-color: #fff;
				width: 100%;
				border-radius: 10rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.text {
					text-indent: 2em;
					width: 100%;
					white-space: pre-wrap;
					font-size: 24rpx;
					word-break: break-all;
					word-wrap: break-word;
					margin-bottom: 20rpx;
				}

				.img-pic {
					width: 200rpx;
					height: 200rpx;
					border: 1rpx solid #eee;

					.img_path {
						width: 100%;
						height: 100%;
					}
				}
			}
		}




	}
</style>